|
在做项目时，当我们用到echarts图表时，大部分产品经理都会要求我们给图表加上一些动画效果，让页面看起来更加炫酷。其实给图表加上动画效果不难，如果数据是实时数据这样做动画效果会更简单点，就怕数据不是实时数据还非要加动画。 接下来我说下echarts 数据动画效果，还是老规矩，先看下效果图  这是个柱形图，我就截图放上来，大家将就的看下哈，想看实际效果可以把下面的代码复制到本地页面上去，自己运行下。接下来就是代码了。
var dom = document.getElementById("p_columnar");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
grid: {
top: '18%',
right: '2%',
bottom: '18%',
left: '10%'
},
xAxis: {
type: 'category',
//boundaryGap: false,//去除图表四周留白
axisTick: { //x轴刻度
show: false
},
axisLine: { //x轴线条颜色
show: true,
lineStyle: {
color: '#374186',
width: 0.5
}
},
axisLabel: {
show: true,
rotate: 40, //文字倾斜度
textStyle: {
color: '#b1bcff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
},
data: ['大乐透', '竞彩', '七星彩', '排3', '排5', '即开', '顶呱呱', '传足']
},
yAxis: {
type: 'value',
//interval: 100, //刻度值间隔值
name: '万',
nameTextStyle: {
padding: [0, 30, 5, 0], // y轴name位置
color: '#b1bcff', //更改单位文字颜色
fontSize: 15 //更改单位文字大小
},
splitLine: { //网格线
lineStyle: {
//type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
color: '#374186', //网格线颜色
width: 0.5
},
},
axisLabel: {
show: true,
textStyle: {
color: '#b1bcff', //更改坐标轴文字颜色
fontSize: 15 //更改坐标轴文字大小
}
},
axisLine: {
//y轴线条颜色
show: false,
},
},
animationDuration: 3000,
series: [{
barWidth: 20, //柱形宽度
showBackground: false, //柱形背景色
itemStyle: { //柱形渐变色
normal: {
//barBorderRadius: 6, //柱形圆角
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#188df0'
},
{
offset: 1,
color: '#36d1dc'
}
]
),
},
},
label: { //显示当前柱形数值
show: true,
position: 'top',
textStyle: {
color: '#15d0dd', //更改坐标轴文字颜色
fontSize: 15 //更改坐标轴文字大小
}
},
data: [49, 71, 106, 129, 144, 176, 135, 148],
type: 'bar'
}]
};
var mychart1 = echarts.init(document.getElementById("p_columnar"));
//模拟实时数据
var data = [
[23, 42, 53, 23, 42, 47, 112, 212],
[29, 64, 56, 98, 75, 67, 172, 312],
[43, 82, 80, 116, 95, 367, 192, 412],
[61, 105, 165, 156, 155, 500, 220, 512],
[123, 234, 533, 206, 405, 667, 362, 612],
];
//定时器
setInterval(getItem, 2000);
function getItem() {
var random = data[parseInt(Math.random() * data.length)];
option.series[0].data = random; //获取series的第一行数据，并将模拟的数据赋值给他
mychart1.setOption(option); //重新加载图表
};
if (option && typeof option === 'object') {
myChart.setOption(option);
};
以上代码就是以柱形图为例做的数据动画效果，做个笔记记录下，欢迎大家点评。
|